import { defineComponent, ref } from "vue"

import blockBoxCom from "./component/index";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import bgIcon from './assect/bg-icon.png'
import upIcon from './assect/up-icon.png'
import IconText from "@/components/IconText";
import setIcon from "./assect/set-icon.png";
import { useRequest } from "./request";
export default defineComponent({
    name: '',
    components: { blockBoxCom },
    setup() {
        const {queryMonthData} =useRequest()
        console.log(queryMonthData);
        

        const render1 = () => {
            const  data=queryMonthData.value
            return data.map((e: any) => {
                return <div>
                    <blockBoxCom text={e.by?e.by:'0'} title={e.title} >
                        {e.xc>0?<div class={'flex text-[#999999]'}>较上月:
                            <img src={upIcon} alt="" class={' w-5'} style={{ backgroundSize: '100%' }} /><span class={'text-red'}>{e.xc}</span></div>:''}
                    </blockBoxCom>
                </div>
            })
        }

        return () => {
            return <>
                <PageTitle title="共富数据" class={'!h-[100]'}>

                    <div class={'h-full'}>
                        <div
                            class="w-full !h-[125px]"
                            style={{
                                backgroundImage: `url(${bgIcon})`,
                                backgroundSize: '100% 100%',
                                minHeight: '125px'
                            }}
                        >
                        </div>
                        <div class={'flex items-center mt-12 mx-12'}>
                            <img src={setIcon} class="message mr-5 !text-15 h-5 w-5" />
                            <div class={'text-15 font-bold '} style={{ letterSpacing: '2px' }}>本月数据</div>
                        </div>
                        <div class={'flex justify-between px-12 flex-wrap'}>

                            {render1()}
                        </div>
                    </div>
                </PageTitle>
            </>
        }
    }
})